<template>
	<view class="com-patient-info">
		<view class="yy-inquiry-user-info patient-bg" v-if="patientInfo">
			<view class="user-left">
				<view class="icon">
					<image v-if="patientInfo.avatar"
						:src="patientInfo.avatar" mode="aspectFill">
					</image>
					<image v-else src="@/static/images/f.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="user-right">
				<view class="info">
					{{ infoFormat(patientInfo) }}
				</view>
				<view class="detail">
					{{ bodyStatae(patientInfo)}}
				</view>
			</view>
		</view>
		<view class="disease-msg" v-if="diseaseMsg && diseaseMsg.describe">
			<view class="disease-item-title">患者描述:</view>
			<view class="disease-content">
				<text class="disease-des">{{diseaseMsg.describe}}</text>
			</view>
			<view class="disease-item-title" v-if="diseaseMsg.is_guide == 1">患者需要指导用药</view>
			<view class="" v-if="diseaseMsg.pic && diseaseMsg.pic.length>0">
				<view class="disease-item-title">影像资料:</view>
				<view class="content-img-box">
					<view class="content-img" v-for="(item,index) in diseaseMsg.pic">
						<image :src="item" mode="aspectFill" @click="clickImg(diseaseMsg.pic,index)"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userinfoFormat,
		userBodyStataeFormat
	} from "@/utils/format.js";
	export default {
		name:'patientInfo',
		props:{
			patientInfo:{
				type:Object,
				default:function(){
					return {}
				}
			},
			diseaseMsg:{
				type:Object,
				default:function(){
					return {}
				}
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			/**
			 * 信息格式化
			 */
			infoFormat(info) {
				return userinfoFormat(info);
			},
			/**
			 * 状态格式化
			 */
			bodyStatae(info) {
				return userBodyStataeFormat(info);
			},
			/**
			 * 图片预览
			 */
			clickImg(urls,idx){
				wx.previewImage({
					urls: urls,
					current: idx,
					success: function(res){},
					fail: function(res){},
					complate: function(res){}
				})
			},
		}
	}
</script>

<style lang="scss">
	.patient-bg{
		margin-bottom: 0;
		background-color: #fff;
	}
	.disease-msg {
		.disease-item-title {
			font-weight: bold;
		}
		.disease-content {
			padding: 10rpx 20rpx;
			color: #969696;
		}
	}
	.content-img-box {
		display: flex;
		flex-wrap: wrap;
		.content-img {
			position: relative;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin: 10rpx 0rpx 10rpx 0;
			width: 33%;
			height: 158rpx;
	
			image {
				width: 158rpx;
				height: 158rpx;
			}
			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
</style>